<template>
<div class="wrap">
  <el-tabs v-model="activePanel" type="card" @tab-click="handleClick" class='tabPanel'>
    <el-tab-pane label="待确认" name="pending">

      <div class="filter-container">
        <div class= 'filterBox'>
          <div class='leftPart filterPart'>
            <el-radio-group v-model="timeType" size="medium">
              <el-radio-button label="0">今日预约</el-radio-button>
              <el-radio-button label="1">24小时后手术</el-radio-button>
              <el-radio-button label="2">48小时后手术</el-radio-button>
              <el-radio-button label="3">72小时后手术</el-radio-button>
            </el-radio-group>
          </div>
          <div class='rightPart filterPart'>
            <el-select clearable style="width: 120px" class="filter-item" v-model="filter.type">
              <el-option label="患者姓名" value="0"></el-option>
              <el-option label="手机号后四位" value="1"></el-option>
              <el-option label="就诊卡号" value="2"></el-option>
            </el-select>
            <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter.keyWord">
            </el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </div>
        </div>
      </div>
      <complex-table
        :columnsType= '"index"'
        :list = 'tableList1'
        :totalList = 'totalList1'
        :theadList = "surgeryConfirmConst.theadList1"
        :operationButtons = 'surgeryConfirmConst.operationButtons1'
        @initListQuery = 'initListQuery'
        @getSelectArr = 'getSelectArr'
        @operationEvent1 = 'operationEvent1_1'
        @getListByPagination = 'getTableList1'>
      </complex-table>

    </el-tab-pane>

    <el-tab-pane label="已确认" name="done">
      <div class="filter-container">
        <div class= 'filterBox'>
          <div class='leftPart filterPart'>
            <el-button class="filter-item" type="primary" v-waves  >发送手术室</el-button>
            <el-button class="filter-item" type="primary" v-waves  >发送手术通知</el-button>
          </div>
          <div class='rightPart filterPart'>
            <el-select clearable style="width: 120px" class="filter-item" v-model="filter2.type">
              <el-option label="患者姓名" value="0"></el-option>
              <el-option label="手机号后四位" value="1"></el-option>
              <el-option label="就诊卡号" value="2"></el-option>
            </el-select>
            <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter2.keyWord">
            </el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter2">搜索</el-button>
          </div>
        </div>
      </div>
      <complex-table
        :columnsType= '"index"'
        :hasOperate = false
        :list = 'tableList2'
        :totalList = 'totalList2'
        :theadList = "surgeryConfirmConst.theadList1"
        @initListQuery = 'initListQuery'
        @getListByPagination = 'getTableList2'>
      </complex-table>
    </el-tab-pane>

  </el-tabs>
  <el-dialog title="退出日间" :visible.sync="dialogLeftTop1_1" class='dialogLeftTop1_1'>
        <el-form ref="formLeftTop2" :model="formLeftTop2" label-width="80px">
          <el-form-item label="类型">
            <dict-select v-model="formLeftTop2.typeId" placeholder="请选择取消类型" dict-code="exit_doms_type">
            </dict-select>
          </el-form-item>
          <el-form-item label="取消原因">
            <dict-select v-model="formLeftTop2.reasonId" placeholder="请选择取消原因" dict-code="exit_doms_reason" parent-code="exit_doms_type" :parent-value="formLeftTop2.typeId">
            </dict-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="formLeftTop2.memo"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogLeftTop1_1 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('formLeftTop2')">确 定</el-button>

        </div>
      </el-dialog>
</div>
</template>
<script>
  import complexTable from '@/views/table/complexTable'
  import waves from '@/directive/waves/index.js'
  import { surgeryConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
  import { pageList, getDoctorList, getSurgeryList } from '@/api/appointmentManage/surgery'
  import { cancel } from '@/api/appointmentManage/appointmentConfirm'
  import DictSelect from '@/views/form/dictSelect'
  export default {
    components: { DictSelect, complexTable },
    data() {
      return {
        surgeryConfirmConst,
        radio4: '',
        timeType: '0',
        filter: {
          keyWord: '',
          type: '0',
          todayFlag: false,
          page: 1,
          limit: 5
        },
        filter2: {
          keyWord: '',
          type: '0',
          page: 1,
          limit: 5
        },
        activePanel: 'pending',
        dialogLeftTop1_1: false,
        dialogLeftTop1_2: false,
        formLeftTop2: {
          typeId: '',
          reasonId: '',
          memo: '',
          appointId: 0
        },
        dialogLeftTop1_1_data: {
          card: '',
          ID: '',
          name: '',
          gender: '',
          doctor: '',
          surgery: '',
          expectTime: '',
          telephone: '',
          family: '',
          familyTel: '',
          relation: ''
        },
        dialogLeftTop1_1_data_doctorList: [],
        dialogLeftTop1_1_data_surgeryList: [],
        // formLeftTop2: {
        //   type: '',
        //   content: ''
        // },
        formLabelWidth: '120px',
        filterContainer: {},
        tableList1: [],
        tableList2: [],
        selectArr: [],
        totalList1: 0,
        totalList2: 0
      }
    },
    mounted() {
      this.getTableList1(this.filter)
      this.getTableList2(this.filter2)
    },
    methods: {
      initListQuery(listQuery) {
        this.filter.limit = listQuery.limit
        this.filter.page = listQuery.page
        this.filter2.limit = listQuery.limit
        this.filter2.page = listQuery.page
      },
      operationEvent1_1(row) {
        this.formLeftTop2.appointId = row.appointmentId

        this.dialogLeftTop1_1 = true
      },
      submitForm(formName) {
        // 缺少取消的  ajax 请求
        this.$refs[formName].validate((valid) => {
          if (valid) {
            cancel(this.formLeftTop2).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: '取消成功！',
                  type: 'success',
                  duration: 2000
                })
                this.$refs[formName].resetFields()
                this.dialogLeftTop1_1 = false
                if (this.tableList1.length === 1) {
                  this.filter.page = (this.filter.page - 1 <= 0 ? 1 : this.filter.page - 1)
                }
                this.getTableList1(this.filter)
              } else {
                this.$message({
                  message: '取消失败！',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getDoctorList() {
        getDoctorList().then((res) => {
          this.dialogLeftTop1_1_data_doctorList = res.data.data
        })
      },
      getSurgeryList(doctor) {
        getSurgeryList({ doctor: doctor }).then((res) => {
          this.dialogLeftTop1_1_data_surgeryList = res.data.data
        })
      },
      handleFilter() {
        this.getTableList1(this.filter)
      },
      handleFilter2() {
        this.getTableList2(this.filter2)
      },
      todayAppointment() {
      },
      propagandaAndEducation() {
        if (!this.selectArr.length) {
          this.$message({
            message: '请先选择宣教对象！',
            type: 'warning'
          })
          return
        }
        this.dialogLeftTop1_2 = true
      },
      getSelectArr(selectArr) {
        this.selectArr = selectArr
      },
      handleClick(tab, event) {
      },
      getTableList1(listQuery) {
        this.filter.limit = listQuery.limit
        this.filter.page = listQuery.page
        pageList({ condition: this.filter.type, status: 0, keyword: this.filter.keyWord, timeType: this.timeType, todayFlag: this.filter.todayFlag ? 1 : 0 }, this.filter.page, this.filter.limit).then((res) => {
          if (res.data.code === 200) {
            for (const item of res.data.list) {
              item.id = item.appointmentId
            }
            this.tableList1 = res.data.list
            this.totalList1 = res.data.total
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      },
      getTableList2(listQuery) {
        this.filter2.limit = listQuery.limit
        this.filter2.page = listQuery.page
        pageList({ condition: this.filter2.type, status: 1, keyword: this.filter2.keyWord }, this.filter2.page, this.filter2.limit).then((res) => {
          for (const item of res.data.list) {
            item.id = item.appointmentId
          }
          this.tableList2 = res.data.list
          this.totalList2 = res.data.total
        })
      }
    },
    directives: {
      waves
    }
  }
</script>
<style lang="scss">
  .tabPanel{
    height: 100%;
    background-color: #fff;
    padding-top: 10px;
    overflow: auto;
    .el-tabs__header{
      padding-left: 20px;
    }
  }
  .filterBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .filterPart{
      line-height: 2;
    }
  }
  .dialogLeftTop1_1{
    .el-select{
      display: block;
    }
  }
</style>
